<template>
  <div>
    <div v-if="Props.airportData != null">
      <div class="chart-wrapper" style="width: 360px" v-if="Props.showHeader">
        <el-tooltip :content="Props.airportData.sectorReason" placement="top">
          <el-button type="info" size="small" link icon="InfoFilled">
            扇区建议:
            <b>{{ Props.airportData.sectorRequire }}</b></el-button
          >
        </el-tooltip>
        <div>
          <el-button
            type="info"
            link
            @click="refreshChart()"
            icon="Refresh"
          ></el-button>
          <el-button
            type="info"
            link
            @click="showRaw()"
            icon="Document"
          ></el-button>
          <el-button
            type="info"
            link
            @click="download()"
            icon="Download"
          ></el-button>
        </div>
      </div>
      <!-- <div style="width: 600px; height: 600px"> -->
      <v-chart
        v-if="showChart"
        :option="option"
        ref="chart"
        :init-options="{ width: 360, height: 300 }"
      />
      <!-- autoresize -->
      <!-- </div> -->
    </div>
    <el-empty v-else />
  </div>
</template>

<script setup>
// import echarts
import * as echarts from "echarts/core";
import {
  CanvasRenderer,
  // SVGRenderer,
} from "echarts/renderers";
import {
  // BarChart,
  // LineChart,
  // ScatterChart,
  // EffectScatterChart,
  PieChart,
} from "echarts/charts";
import // LegendComponent,
// TitleComponent,
// TooltipComponent,
// ToolboxComponent,
// GridComponent,
// DatasetComponent,
// TransformComponent,
// PolarComponent,
"echarts/components";
import {
  LabelLayout,
  //UniversalTransition,
} from "echarts/features";

// import vue echarts
import VChart, { THEME_KEY } from "vue-echarts";
import { ElMessageBox, ElInput } from "element-plus";
import useCommonStore from "@/store/common.js";

// import vue apis
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";

echarts.use([
  CanvasRenderer,
  // SVGRenderer,
  // BarChart,
  // LineChart,
  // ScatterChart,
  // EffectScatterChart,
  PieChart,
  // LegendComponent,
  // TitleComponent,
  // TooltipComponent,
  // ToolboxComponent,
  // GridComponent,
  // DatasetComponent,
  // TransformComponent,
  // PolarComponent,
  LabelLayout,
  // UniversalTransition,
]);

const commonStore = useCommonStore();

const Props = defineProps({
  airportData: {
    type: Object,
    default: null,
  },
  showHeader: {
    type: Boolean,
    default: true,
    required: false,
  },
});

const chart = ref();
const showChart = ref(true);

let dynamicStartAngle = 0;
// let angleTimer = null;
// onMounted(() => {
//   angleTimer = setInterval(() => {
//     console.log("dynamicStartAngle", dynamicStartAngle);
//     dynamicStartAngle += 10;
//     if (dynamicStartAngle == 360) {
//       dynamicStartAngle = 0;
//     }
//   }, 2000);
// });
// onUnmounted(() => {
//   clearInterval(angleTimer);
// });

const refreshChart = async () => {
  showChart.value = false;
  await nextTick();
  showChart.value = true;
  await nextTick();
  if (chart == null || chart.value == null) {
    return null;
  } else {
    chart.value.resize();
  }
};

const showRaw = () => {
  ElMessageBox({
    title: "机场数据: " + Props.airportData.moment,
    message: h(
      "pre",
      {
        style: {
          fontFamily: "Consolas",
          fontSize: "12",
          height: "320px",
          overflow: "auto",
        },
      },
      JSON.stringify(Props.airportData, null, 2)
    ),
  });
};

const download = () => {
  if (chart == null || chart.value == null) {
    return null;
  }
  let dataURL = chart.value.getDataURL();
  const elink = document.createElement("a");
  elink.download = "airportData.svg"; // 设置默认文件名
  elink.style.display = "none";
  elink.href = dataURL;
  document.body.appendChild(elink);
  elink.click();
  URL.revokeObjectURL(elink.href); // 释放URL 对象
  document.body.removeChild(elink);
};

const option = computed(() => {
  let cell = Props.airportData.airport;
  let padding = 16;

  return {
    series: [
      {
        name: "机场进DEP",
        type: "pie",
        radius: ["20%", "80%"],
        roseType: "radius", // radius, area
        startAngle: dynamicStartAngle,
        left: padding,
        right: padding,
        top: padding,
        bottom: padding,
        showEmptyCircle: false,
        itemStyle: {
          borderRadius: 8,
          // borderWidth: 2,
          // borderColor: commonStore.darkMode
          //   ? "rgba(255,255,255,0.3)"
          //   : "rgba(0,0,0,0.2)",
          // shadowBlur: 16,
          // shadowColor: commonStore.darkMode
          //   ? "rgba(255,255,255,0.5)"
          //   : "rgba(0,0,0,0.5)",
        },
        label: {
          show: true,
          color: "rgb(128,128,128)",
          // color: commonStore.darkMode
          //   ? "rgba(255,255,255,0.6)"
          //   : "rgba(0,0,0,0.7)",
          formatter: (params) =>
            `${params.name.split(" ")[0]}\n${params.name.split(" ")[1]}: ${
              params.value
            }`,
          // fontFamily: "Consolas",
          // fontSize: 10,
          fontWeight: "bold",
          width: 40,
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 20,
          smooth: true,
          // minTurnAngle: 0,
        },
        emphasis: {
          scale: true,
          scaleSize: 12,
          focus: "self",
        },
        data: [
          {
            value: cell.ZUUU.type.DEP.total,
            name: "ZUUU 起",
            itemStyle: { color: "#3498DB" },
            label: { show: cell.ZUUU.type.DEP.total != 0 },
            labelLine: { show: cell.ZUUU.type.DEP.total != 0 },
          },
          {
            value: cell.ZUUU.type.ARR.total,
            name: "ZUUU 落",
            itemStyle: { color: "#E67E22" },
            label: { show: cell.ZUUU.type.ARR.total != 0 },
            labelLine: { show: cell.ZUUU.type.ARR.total != 0 },
          },
          {
            value: cell.ZUTF.type.DEP.total,
            name: "ZUTF 起",
            itemStyle: { color: "#2ECC71" },
            label: { show: cell.ZUTF.type.DEP.total != 0 },
            labelLine: { show: cell.ZUTF.type.DEP.total != 0 },
          },
          {
            value: cell.ZUTF.type.ARR.total,
            name: "ZUTF 落",
            itemStyle: { color: "#F1C40F" },
            label: { show: cell.ZUTF.type.ARR.total != 0 },
            labelLine: { show: cell.ZUTF.type.ARR.total != 0 },
          },
          {
            value: cell.ZUMY.type.DEP.total,
            name: "ZUMY 起",
            itemStyle: { color: "#9B59B6" },
            label: { show: cell.ZUMY.type.DEP.total != 0 },
            labelLine: { show: cell.ZUMY.type.DEP.total != 0 },
          },
          {
            value: cell.ZUMY.type.ARR.total,
            name: "ZUMY 落",
            itemStyle: { color: "#E74C3C" },
            label: { show: cell.ZUMY.type.ARR.total != 0 },
            labelLine: { show: cell.ZUMY.type.ARR.total != 0 },
          },
        ],
      },
    ],
  };
});

// let autoResizeTimer = null;
// onMounted(() => {
//   autoResizeTimer = setInterval(async () => {
//     if (chart && chart.value) {
//       // console.log("chart.value.resize()");
//       await nextTick();
//       chart.value.resize();
//     }
//   }, 1000);
// });
// onUnmounted(() => {
//   clearInterval(autoResizeTimer);
// });
</script>

<style scoped>
.chart-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 12px 0 12px;
}
</style>
